<template>
	<view class="content">
		<view v-if="hasLogin" class="hello">
			<view class="title">
				您好 {{userName}}，您已成功登录。
			</view>
			<view class="ul">
				<!-- <view>在 “我的” 中点击 “退出” 可以 “注销当前账户”</view> -->
				<uni-list>
					<uni-list-item v-for="(item,i) in rentHouseList" :key="item.id" title="">
						<view class="list-view list-viewY" @click="openUrl(item)">
							<view class="list-viewX">
								<image v-if="item.img1 === ''||item.img1===null||item.img1===undefined" class="list-view-img" src="../../static/img/noimg.png"></image>
								<image v-else class="list-view-img" :src="item.img1"></image>
								<view class="list-viewY">
									<text class="list-view-title">{{item.title.length>20?item.title.substring(0,20)+'...':item.title}}</text>
									<text class="list-view-text">检索时间：{{item.time}}</text>
									<text class="list-view-text">信息来源：{{item.resource}}</text>
								</view>
							</view>
							<view class="list-viewX" style="flex-wrap: wrap;">
								<text class="list-view-text">价格：{{item.price}}</text>
								<text class="list-view-text">面积：{{item.area}}</text>
								<text class="list-view-text">租赁方式：{{item.rentType}}</text>
								<text class="list-view-text">位置：{{item.location}}</text>
								
							</view>
						</view>
					</uni-list-item>
				</uni-list>
			</view>
		</view>
		<view v-if="!hasLogin" class="hello">
			<view class="title">
				您好 游客。
			</view>
			<view class="ul">
				<view>未登录无法查看租房信息！</view>
				<view>在 “我的” 中点击 “登录” 可以 “登录您的账户”</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	let _that;
	export default {
		data() {
			return {
				//userName:'simon',
				//hasLogin: true,
				rentHouseList:'',
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		created() {
			_that=this;
		},
		onLoad() {
			if (!this.hasLogin) {
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}else{
				uni.request({
					data:'',
					url: getApp().globalData.service_url+'/rent-house/selectByParams',
					success(e) {
						console.log(e);
						_that.rentHouseList=e.data.data;
					}
					
				})
			}
		},
		methods:{
			openUrl: (e)=>{
				uni.navigateTo({
					url:"../info/info?id="+e.id,
					
				})
			}
		}
	}
</script>

<style>
	.hello {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.title {
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul {
		font-size: 15px;
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul>view {
		line-height: 25px;
	}
	
	.list-view{
		background-color: #FFFFFF;
		border-radius: 30upx;
		box-shadow: 1px 1px 2px 0px #999999;
		margin : 15upx;
	}
	.list-viewY{
		display: flex;
		flex-direction: column;
	}
	.list-viewX{
		display: flex;
		align-items: flex-start;
		flex-direction: row;
	}
	.list-view-img{
		width: 500upx;
		height: 200upx;
		
	}
	.list-view-title,
	.list-view-text,
	.list-view-img{
		padding: 15upx;
	}
	.list-view-title{
		color: #000000;
	}
	.list-view-text{
		padding: 0upx 15upx 15upx 15upx;
		color: #C8C7CC;
		font-size: 25upx;
	}
</style>
